
<template>
  <dialog-normal
    ref="dialog-upload"
    :dialog-prop="{
      title: title,
      width: '500px'
    }"
    @normal-submit="submitDialog('active', currentItem)">
    <template #dialog-content>
      <div class="flex-center">
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="true"
          drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <!-- <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板</el-link
            > -->
          </div>
        </el-upload>
      </div>      
    </template>
  </dialog-normal>
</template>

<script>

import { getToken } from "@/utils/auth";
export default {
  name: "ImportDialg",
  props: {
    url: String,
    title: String
  },
  watch: {
    url: {
      handler:function(url){
        if(!url) return
        this.upload.url = ''
        this.upload.url = `${process.env.VUE_APP_BASE_API}${url}`
      },
      immediate: true
    },
  },
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
  },
  data() {
    return {
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 可上传文件类型
        accept: ".xlsx,.xls",
        // 上传的地址
        url: '',
      },
    };
  },
  methods: {
    showDialog() {
      let _self = this;
      _self.$nextTick(() => {
        _self.$refs[`dialog-upload`].showDialog = true
      })
    },    
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(res) {
      let {code, data, msg} = res
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if(code == 200){
        this.$message.success(msg)
        this.$emit('import-success', data)
        this.$nextTick(() => {
          this.$refs[`dialog-upload`].showDialog = false
        })
      }else{
        this.$message.error(msg)
      }
    },
  }
};
</script>
<style scoped lang="scss">
</style>